<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:on-click="http://www.w3.org/1999/xhtml">

<head>
    <meta content="text/html;charset = utf-8" http-equiv="content-type">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>添加商品</title>

    <link href="../lib/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="../lib/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css"/>
    <link href="../home/css/personal.css" rel="stylesheet" type="text/css">
    <link href="../home/css/infstyle.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../lib/jquery/jquery.min.js"></script>
    <script src="../lib/AmazeUI-2.4.2/assets/js/amazeui.js" type="text/javascript"></script>
    <script src="../lib/vue/2.4.2/vue.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../lib/elementui/1.4.3/theme-default/index.css">
    <link href="../home/css/addMerchandise.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
    <script src="../home/js/vue.min.js"></script>
    <script src="../lib/elementui/1.4.3/index.js"></script>

</head>

<body>
<div id="addMerchandise">
    <div class="center" style="margin-top: -10px">
        <div class="col-main">
            <div id="main-wrap" class="main-wrap">

                <div class="user-info" style="margin: auto">
                    <!--标题 -->
                    <div class="am-cf am-padding">
                        <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">商品信息</strong></div>
                    </div>

                    <!--个人信息 -->

                    <form class="am-form am-form-horizontal">

                        <div class="am-form-group">
                            <label class="am-form-label">商品名称</label>
                            <div class="am-form-content">
                                <input v-model="commodity.commodityName" onblur="v_shopsname();" type="text" id="user-name2" placeholder="商品名称">
                                <img id="img-icon1-1" src="../lib/images/icon-1.png"><img id="img-icon1-2" src="../lib/images/icon-2.png">
                                <span id="tab1"></span>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label class="am-form-label">商品类型</label>

                            <div class="am-form-content address">
                                <el-cascader  :options="category"  onclick="v_type();" onblur="v_type();" v-model="selectedOptions" ></el-cascader>
                                <img id="img-icon2-1" src="../lib/images/icon-1.png"><img id="img-icon2-2" src="../lib/images/icon-2.png">
                                <span id="tab2" style="right: -220px;"></span>
                            </div>
                        </div>

                        <!-- <div class="am-form-group" style="margin-top: -10%;margin-left: 60%">
                             <label class="am-form-label">所属店铺</label>

                             <div class="am-form-content address">
                                 <el-cascader :options="merchantList" v-model="merchantId"></el-cascader>
                             </div>
                         </div>-->


                        <div class="am-form-group">
                            <label class="am-form-label">品牌</label>
                            <div class="am-form-content">
                                <input id="brand" type="text" onclick="v_brandname();" onblur="v_brandname();" placeholder="品牌名称" v-model="commodity.brand">
                                <img id="img-icon3-1" src="../lib/images/icon-1.png"><img id="img-icon3-2" src="../lib/images/icon-2.png">
                                <span id="tab3"></span>
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label class="am-form-label">商品型号</label>
                            <div class="am-form-content">
                                <input id="model" type="text" onblur="v_model();" placeholder="商品型号" v-model="commodity.model">
                                <img id="img-icon4-1" src="../lib/images/icon-1.png"><img id="img-icon4-2" src="../lib/images/icon-2.png">
                                <span id="tab4"></span>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label class="am-form-label">商品代码</label>
                            <div class="am-form-content">
                                <input id="Num" type="text" onblur="v_Num();" placeholder="商品代码" v-model="commodity.num">
                                <img id="img-icon5-1" src="../lib/images/icon-1.png"><img id="img-icon5-2" src="../lib/images/icon-2.png">
                                <span id="tab5"></span>
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label class="am-form-label">质保时间</label>
                            <div class="am-form-content">
                                <input id="quality" type="text" onblur="v_quality();" placeholder="12个月" v-model="commodity.quality">
                                <img id="img-icon6-1" src="../lib/images/icon-1.png"><img id="img-icon6-2" src="../lib/images/icon-2.png">
                                <span id="tab6"></span>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label class="am-form-label">制造商</label>
                            <div class="am-form-content">
                                <input id="manufacturer" type="text" onblur="v_manufacturer();" placeholder="制造商" v-model="commodity.manufacturer">
                                <img id="img-icon7-1" src="../lib/images/icon-1.png"><img id="img-icon7-2" src="../lib/images/icon-2.png">
                                <span id="tab7"></span>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label class="am-form-label">市场价格</label>
                            <div class="am-form-content">
                                <input id="commodityMakPrc" type="text" placeholder="元" onblur="v_commodityMakPrc();" v-model="commodity.commodityMakPrc">
                                <img id="img-icon8-1" src="../lib/images/icon-1.png"><img id="img-icon8-2" src="../lib/images/icon-2.png">
                                <span id="tab8"></span>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label class="am-form-label">供货价格</label>
                            <div class="am-form-content">
                                <input id="commodityTrcPrc" type="text" placeholder="元" onclick="v_commodityTrcPrc();" onblur="v_commodityTrcPrc();" v-model="commodity.commodityTrcPrc">
                                <img id="img-icon9-1" src="../lib/images/icon-1.png"><img id="img-icon9-2" src="../lib/images/icon-2.png">
                                <span id="tab9" style="right: -300px;"></span>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-name2" class="am-form-label">库存</label>
                            <div class="am-form-content">
                                <input id="stock" type="text" placeholder="数量"  onblur="v_stock();" v-model="commodity.stock">
                                <img id="img-icon10-1" src="../lib/images/icon-1.png"><img id="img-icon10-2" src="../lib/images/icon-2.png">
                                <span id="tab10"></span>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-name2" class="am-form-label">单位</label>
                            <div class="am-form-content">
                                <select v-model="commodity.unit" id="selected" onblur="v_unit();">
                                    <option>件</option><option>台</option><option>个</option><option>盒</option><option>双</option><option>套</option><option>桶</option>
                                    <option>瓶</option><option>袋</option><option>架</option><option>箱</option><option>包</option><option>提</option><option>打</option>
                                    <option>片</option><option>其它</option>
                                </select>
                                <img id="img-icon13-1" src="../lib/images/icon-1.png" style="margin-top: -25px;"><img id="img-icon13-2" src="../lib/images/icon-2.png" style="margin-top: -25px;">
                                <span id="tab13" style="margin-top: -25px;"></span>
                            </div>
                        </div>


                        <div class="am-form-group">
                            <label for="user-name2" class="am-form-label">产品描述</label>
                            <div class="am-form-content">
                                <textarea id="rests" placeholder="请填写商品参数和产品基本信息" onblur="v_rests();" v-model="commodity.rests"></textarea>
                                <img id="img-icon11-1" src="../lib/images/icon-1.png"><img id="img-icon11-2" src="../lib/images/icon-2.png">
                                <span id="tab11"></span>
                            </div>
                        </div>
                        <div  class="am-g" style="margin-top: 10px" v-if="addModify==''">
                            <div class="am-u-sm-12">
                                <el-upload style="margin-bottom: 20px;margin-top: 18px;"
                                        class="upload-demo"
                                        ref="upload"
                                        list-type="text"
                                        :data="map"
                                        :action="importFileUrl"
                                        :auto-upload="false"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload"
                                        :on-error="handleAvatarError">
                                    <el-button size="small" type="primary" style="position: absolute;right: 0px;top:19px;">点击上传</el-button>
                                    <label for="user-name2" class="am-form-label ">主图信息</label>
                                    <input id="picture" type="text"  style="width: 665px;height: 32px; margin-left: 85px;"/>
                                   <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，建议大小800*800</div>-->
                                    <img id="img-icon12-1" src="../lib/images/icon-1.png"><img id="img-icon12-2" src="../lib/images/icon-2.png">
                                    <span id="tab12" style="right: -150px;"></span>
                                </el-upload>
                            </div>
                        </div>
                        <div>
                            <label for="user-name2" class="am-form-label">编辑商品详细信息</label>
                            <div id="editor" type="text/plain" style="height:300px;width: 750px;"></div>
                        </div>
                    </form>
                    <div class="info-btn" style="margin-top: 80px;">
                        <button id="submit" type="button" v-on:click="addCommodity"
                                class="am-btn am-btn-primary am-btn-sm am-round">
                            提交
                        </button>
                    </div>

                </div>

            </div>

            <!--底部-->

        </div>


    </div>
</div>
<script type="text/javascript">

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');


    function isFocus(e) {
        alert(UE.getEditor('editor').isFocus());
        UE.dom.domUtils.preventDefault(e)
    }

    function setblur(e) {
        UE.getEditor('editor').blur();
        UE.dom.domUtils.preventDefault(e)
    }

    function insertHtml() {
        var value = prompt('插入html代码', '');
        UE.getEditor('editor').execCommand('insertHtml', value)
    }

    function createEditor() {
        enableBtn();
        UE.getEditor('editor');
    }

    function getAllHtml() {
        alert(UE.getEditor('editor').getAllHtml())
    }

    function getContent() {
        var arr = [];
        arr.push("使用editor.getContent()方法可以获得编辑器的内容");
        arr.push("内容为：");
        arr.push(UE.getEditor('editor').getContent());
        alert(arr.join("\n"));
    }

    function getPlainTxt() {
        var arr = [];
        arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
        arr.push("内容为：");
        arr.push(UE.getEditor('editor').getPlainTxt());
        alert(arr.join('\n'))
    }

    function setContent(isAppendTo) {
        var arr = [];
        arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
        UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
        alert(arr.join("\n"));
    }

    function setDisabled() {
        UE.getEditor('editor').setDisabled('fullscreen');
        disableBtn("enable");
    }

    function setEnabled() {
        UE.getEditor('editor').setEnabled();
        enableBtn();
    }

    function getText() {
        //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
        var range = UE.getEditor('editor').selection.getRange();
        range.select();
        var txt = UE.getEditor('editor').selection.getText();
        alert(txt)
    }

    function getContentTxt() {
        var arr = [];
        arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
        arr.push("编辑器的纯文本内容为：");
        arr.push(UE.getEditor('editor').getContentTxt());
        alert(arr.join("\n"));
    }

    function hasContent() {
        var arr = [];
        arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
        arr.push("判断结果为：");
        arr.push(UE.getEditor('editor').hasContents());
        alert(arr.join("\n"));
    }

    function setFocus() {
        UE.getEditor('editor').focus();
    }

    function deleteEditor() {
        disableBtn();
        UE.getEditor('editor').destroy();
    }

    function disableBtn(str) {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            if (btn.id == str) {
                UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
            } else {
                btn.setAttribute("disabled", "true");
            }
        }
    }

    function enableBtn() {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
        }
    }

    function getLocalData() {
        alert(UE.getEditor('editor').execCommand("getlocaldata"));
    }

    function clearLocalData() {
        UE.getEditor('editor').execCommand("clearlocaldata");
        alert("已清空草稿箱")
    }
</script>

</body>

<script src="../charge/addMerchandise.js"></script>
<script src="../charge/addMerchandiseform.js"></script>

</html>

